<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('financialSynergy.invoice.invoiceId')">
        <el-input v-model="searchParams.number" :placeholder="'请输入'" clearable maxlength="50"></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('financialSynergy.invoice.state')">
        <x-select
          :placeholder="$t('common.all')"
          v-model="searchParams.state"
          :options="dictOptions['srm_invoice.state']"
          style="width: 100%"
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('financialSynergy.invoice.ceratTime')">
        <el-date-picker
          v-model="searchParams.createTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('common.to')"
          :start-placeholder="$t('common.startTime')"
          :end-placeholder="$t('common.endTime')"
          clearable
        >
        </el-date-picker>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <!-- <el-button
              type="primary"
              :icon="buttonIcons('export')"
              @click="handleExport"
              v-hasPermi="['srm:invoiceNoticeSupplier:export']"
            >
              {{ $t('common.export') }}</el-button
            > -->
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">
              {{ selectDictLabel(dictOptions['srm_invoice.state'], scope.row[item.prop]) }}
            </span>
            <span v-else-if="item.prop === 'invoiceType'">
              {{ selectDictLabel(dictOptions['srm_invoice.invoice_type'], scope.row[item.prop]) }}
            </span>
            <span v-else-if="item.prop === 'invoicingDate'">
              {{ replaceDateTime(scope.row[item.prop]) }}
            </span>
            <span v-else>
              {{ scope.row[item.prop] | emptyVal }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :action-list="getActions(actions, scope.row)"
              :permis-list="permissionsActions"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <invoice-logistics ref="logisticsDialog" :dict-options="dictOptions" @handleSuccess="loadData" />
  </x-page>
</template>
<script>
  import {
    buttonIcons,
    PermissionsMixin,
    QueryDictMixin,
    TableListMixin,
    selectDictLabel,
    replaceDateTime
  } from '@package/utils'
  import { columns, actions } from '../config/invoiceManagementConfig'
  import InvoiceLogistics from '../components/invoiceLogistics.vue'
  import { listUrl } from '../api/invoiceManagement.js'

  export default {
    name: 'InvoiceInformationMaintenance',
    components: { InvoiceLogistics },
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        listUrl,
        columns,
        actions,
        searchParams: {
          number: '',
          supplierName: '',
          state: '',
          createTime: ''
        },
        srmDictKeys: [
          'srm_invoice.invoice_type',
          'srm_invoice.state',
          'srm_pay.state',
          'srm_delivery_note.logistical_company'
        ]
      }
    },
    computed: {
      getActions() {
        return (actions, { state }) => {
          return actions.map((action) => {
            if ((action.key === 'draw' && ![2, 4].includes(state)) || (action.key === 'email' && state !== 5)) {
              action.disabled = true
            } else {
              action.disabled = false
            }
            return action
          })
        }
      }
    },
    methods: {
      replaceDateTime,
      selectDictLabel,
      buttonIcons,
      handleSearch(val) {
        const { supplierName, number, state, createTime } = this.searchParams
        this.queryParam = {
          ...val,
          supplierName,
          number,
          state,
          beginTime: createTime ? `${createTime[0]} 00:00:00` : '',
          endTime: createTime ? `${createTime[1]} 23:59:59` : ''
        }
        this.loadData()
      },
      handleChangeSupplier(val) {
        this.searchParams.supplierName = val.fullName
        this.searchParams.supplierId = val.supplierId
      },
      handleActions({ key, data }) {
        const { id } = data
        switch (key) {
          case 'draw':
            this.$router.push({
              path: '/financialSynergy/toBeBilledInvoice',
              query: {
                action: 'draw',
                id
              }
            })
            break
          case 'email':
            this.handleEmailInvocie(data)
            break
          case 'afresh':
            this.$router.push({
              path: '/financialSynergy/toBeBilledInvoice',
              query: {
                action: 'draw',
                id
              }
            })
            break
          case 'view':
            this.$router.push({
              path: '/financialSynergy/invoiceDetail',
              query: {
                action: 'view',
                id
              }
            })
            break
        }
      },
      handleEmailInvocie(id) {
        this.$refs.logisticsDialog.handleOpen(id)
      }
    }
  }
</script>
